<!DOCTYPE html>
<html>
<head>
<title>google map</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<style type="text/css">
html{height:100%;}
body{height:100%;margin: 0px;padding:0px;}
#map_canvas{height:100%;}
#toolbar{position:absolute;top:0px;left:100px;right:100px;padding:2px;background-color:#C5CFD6;border:1px solid #999;z-index:100;}
#tipcontent,.tipcontent{border:1px solid #000;padding:5px;margin-top:7px;background-color:#fff;font-size:12px;font-family: Arial,sans-serif;font-weight:bold;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;}/*Microsoft-YaHei,Arial,sans-serif*/

.infoBox-noclose > img{display:none;}
.infoBox-noclose img{_display:expression(this.parentNode.className=="infoBox"?"none":"");}/*sorry for ie6*/
.highlightInfoBox .tipcontent{border-color:#F9F727;background-color:#ffffcc;}
.car{cursor:pointer;}


</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script> 
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="xmlsocket/XMLSocket.js"></script>
<script type="text/javascript">
//http://mapoo.10010care.com//user/playback.html?v=1.3.1.6&lang=cn&mds=630E1E241CC33F0E0FC6EE5473BBE389.jvm8032&requestSource=web&custid=1025932&loginUrl=http://www1.gpsoo1.net/&custname=goome-07564&objectid=246380&active_time=2012-3-14%2018:48:56&mapType=GOOGLE
var trackdata ="115.76731,24.126635,1331718542000,49;115.766136,24.126884,1331718551000,48;115.76478,24.127174,1331718562000,45;115.76355,24.127434,1331718572000,46;115.76242,24.127684,1331718581000,47;115.76116,24.127954,1331718592000,39;115.76005,24.128155,1331718602000,42;115.758995,24.128233,1331718611000,40;115.75789,24.128174,1331718621000,42;115.75661,24.127954,1331718632000,43;115.75553,24.127764,1331718641000,45;115.75421,24.127523,1331718652000,44;115.75307,24.127335,1331718662000,42;115.75206,24.127193,1331718671000,41;115.75082,24.127064,1331718682000,42;115.74971,24.127024,1331718692000,38;115.748726,24.127045,1331718701000,40;115.74771,24.127153,1331718712000,23;115.74758,24.127455,1331718722000,22;115.74768,24.127995,1331718732000,17;115.74772,24.128473,1331718742000,23;115.74781,24.129124,1331718752000,26;115.74792,24.129753,1331718762000,26;115.74804,24.130333,1331718772000,21;115.74787,24.130634,1331718782000,21;115.7472,24.130844,1331718791000,22;115.7465,24.131094,1331718802000,19;115.74601,24.131273,1331718812000,20;115.74563,24.131643,1331718822000,25;115.74524,24.132254,1331718832000,26;115.744865,24.132874,1331718842000,27;115.74454,24.133404,1331718852000,19;115.743996,24.133444,1331718862000,25;115.74325,24.133184,1331718872000,30;115.74266,24.132984,1331718881000,26;115.742165,24.132833,1331718891000,12;115.74197,24.133144,1331718902000,20;115.74177,24.133743,1331718912000,23;115.74164,24.134233,1331718922000,21;115.74145,24.134773,1331718932000,25;115.74125,24.135464,1331718941000,32;115.74102,24.136173,1331718952000,20;115.74086,24.136805,1331718962000,31;115.74067,24.137465,1331718971000,26;115.74032,24.137875,1331718982000,15;115.73983,24.137774,1331718992000,17;115.73954,24.137653,1331719002000,5;115.7395,24.137604,1331719032000,10;115.73923,24.137585,1331719042000,8;115.73892,24.137465,1331719052000,9;115.73875,24.137274,1331719061000,13;115.73836,24.137354,1331719072000,18;115.7381,24.137774,1331719082000,20;115.73788,24.138193,1331719091000,19;115.73767,24.138575,1331719102000,7;115.73752,24.138803,1331719112000,11;115.73736,24.139204,1331719122000,22;115.73716,24.139673,1331719132000,14;115.73703,24.139963,1331719142000,7;115.73675,24.140293,1331719152000,19;115.736275,24.140594,1331719162000,21;115.73597,24.140804,1331719172000,5;115.73582,24.140924,1331719182000,4;115.73582,24.140974,1331719191000,2;115.73591,24.140924,1331719262000,12;115.73622,24.140715,1331719271000,19;115.73669,24.140444,1331719281000,16;115.73699,24.140213,1331719291000,16;115.737236,24.139673,1331719302000,24;115.73745,24.139204,1331719312000,14;115.737465,24.139004,1331719322000,3;115.73719,24.138754,1331719332000,23;115.73651,24.138334,1331719342000,30;115.735725,24.137934,1331719352000,31;115.734955,24.137613,1331719362000,31;115.73443,24.137394,1331719371000,21;115.733826,24.137323,1331719382000,10;115.73361,24.137335,1331719391000,12;115.73324,24.137175,1331719402000,14;115.73283,24.136984,1331719412000,20;115.73256,24.136805,1331719422000,10;115.73217,24.136614,1331719432000,22;115.73172,24.136574,1331719442000,18;115.73131,24.136515,1331719452000,13;115.73117,24.136274,1331719462000,4;115.731186,24.136065,1331719472000,14;115.73125,24.135674,1331719481000,18;115.73133,24.135174,1331719491000,19;115.73141,24.134653,1331719502000,23;115.73144,24.134363,1331719512000,9;115.73143,24.134193,1331719522000,2;115.7314,24.134094,1331719532000,3;115.73139,24.134045,1331719582000,2;115.731476,24.133873,1331719592000,11;115.7316,24.133453,1331719601000,24;115.73173,24.132673,1331719611000,30;115.73183,24.131964,1331719622000,26;115.73194,24.131294,1331719632000,22;115.73205,24.130653,1331719642000,31;115.732185,24.129784,1331719652000,35;115.73224,24.129133,1331719662000,19;115.73211,24.128754,1331719672000,7;115.73205,24.128433,1331719682000,12;115.73215,24.128094,1331719692000,12;115.73231,24.127914,1331719702000,8;115.7324,24.127773,1331719712000,5;115.732445,24.127594,1331719721000,9;115.73247,24.127344,1331719731000,9;115.732506,24.126993,1331719742000,8;115.73259,24.126675,1331719751000,24;115.73273,24.125895,1331719762000,29;115.73285,24.125174,1331719772000,28;115.733,24.124285,1331719782000,36;115.73316,24.123594,1331719792000,23;115.73339,24.123514,1331719802000,2;115.733505,24.123585,1331719931000,1;115.733406,24.123484,1331719942000,2;115.733345,24.123505,1331719952000,8;115.7332,24.123743,1331719962000,22;115.733055,24.124523,1331719972000,33;115.73289,24.125433,1331719982000,39;115.73275,24.126244,1331719992000,24;115.7327,24.126534,1331720002000,0;115.73269,24.126534,1331720012000,1;115.73255,24.126543,1331720022000,1;115.7325,24.126503,1331720032000,1;115.732475,24.126493,1331720042000,3;115.73252,24.126404,1331720052000,1;115.73257,24.126364,1331720081000,9;115.73258,24.126574,1331720092000,26;115.73253,24.127073,1331720102000,10;115.73249,24.127214,1331720111000,3;115.73236,24.127243,1331720122000,7;115.73242,24.126814,1331720201000,8;115.73252,24.126644,1331720212000,1;115.732605,24.126493,1331720231000,13;115.732735,24.125784,1331720242000,34;115.73279,24.125004,1331720252000,21;115.73213,24.124853,1331720261000,37;115.73091,24.124683,1331720272000,42;115.72945,24.124535,1331720287000,12;115.7288,24.124285,1331720297000,32;115.727905,24.123884,1331720307000,39;115.72702,24.123653,1331720317000,40;115.72591,24.123514,1331720327000,36;115.725235,24.123344,1331720337000,22;115.7252,24.122564,1331720347000,33;115.72526,24.122173,1331720357000,9;115.725365,24.122314,1331720398000,16;115.725296,24.122963,1331720408000,30;115.72519,24.123835,1331720418000,40;115.724846,24.124985,1331720428000,53;115.72471,24.125685,1331720434000,47;115.72443,24.126833,1331720444000,46;115.7241,24.128063,1331720454000,49;115.72391,24.128984,1331720464000,34;115.72373,24.129854,1331720474000,39;115.72352,24.131054,1331720484000,47;115.72328,24.132254,1331720494000,53;115.723076,24.133554,1331720504000,43;115.72328,24.134203,1331720514000,24;115.724106,24.134495,1331720524000,37;115.72487,24.134745,1331720534000,29;115.72581,24.135054,1331720544000,41;115.72661,24.135393,1331720554000,21;115.72654,24.135784,1331720564000,29;115.72591,24.136435,1331720574000,39;115.725266,24.137163,1331720584000,30;115.72472,24.137714,1331720594000,21;115.72475,24.138063,1331720603000,27;115.72526,24.138674,1331720614000,20;115.725266,24.138964,1331720624000,14;115.72483,24.139244,1331720634000,23;115.72432,24.139704,1331720644000,36;115.72375,24.140244,1331720654000,28;115.72327,24.140644,1331720663000,22;115.72287,24.140953,1331720674000,15;115.72258,24.141254,1331720684000,10;115.72235,24.141455,1331720694000,9;115.7221,24.141665,1331720704000,15;115.72194,24.141994,1331720714000,14;115.72204,24.142414,1331720724000,24;115.72227,24.142994,1331720734000,22;115.72249,24.143454,1331720744000,17;115.72268,24.143965,1331720754000,26;115.72296,24.144604,1331720764000,26;115.72328,24.145254,1331720774000,24;115.723465,24.145735,1331720784000,11;115.72346,24.145985,1331720794000,3;115.72345,24.146053,1331720804000,6;115.72345,24.146025,1331720813000,3;115.7229,24.145643,1331721826000,0;115.7231,24.145735,1331721837000,13;115.723305,24.145844,1331721847000,9;115.723755,24.145914,1331721857000,13;115.72432,24.145933,1331721867000,13;115.7246,24.145933,1331721877000,2;115.725075,24.146214,1331721887000,19;115.72555,24.146503,1331721897000,15;115.72597,24.146753,1331721907000,20;115.726135,24.147324,1331721917000,24;115.72609,24.147943,1331721927000,20;115.72613,24.148314,1331721937000,4;115.72607,24.148394,1331721947000,1;115.72605,24.148424,1331721956000,2;115.7261,24.148174,1331721966000,17;115.72623,24.148224,1331721977000,13;115.72626,24.148243,1331721978000,13;115.72689,24.148394,1331722116000,0;115.72705,24.148495,1331722136000,1;";




var Traker= function(){
	var me =this,gm=google.maps,//gm简称
	//108.94609317993158 34.53743075304973
	//国家地理坐标——经纬度的起算点和基准点 http://baike.baidu.com/view/81304.htm
	//显示中国地图
	latlng = new gm.LatLng(34.53743075304973,108.94609317993158);
    me.map = new gm.Map(document.getElementById("map_canvas"),{zoom:4,keyboardShortcuts:false,center: latlng,mapTypeId: gm.MapTypeId.ROADMAP});
	//是否是暂停
	me.pause=false;
	//把秒转化为基本的日期格式
	me.formatSecond=function(msecond) {
		//dd,hh,mm,ss;//天、时、分、秒
		var dd = Math.round(msecond / 86400 + 0.5) - 1,
			hh = Math.round((msecond - dd * 86400) / 3600 + 0.5) - 1,
			mm = Math.round((msecond - dd * 86400 - hh * 3600) / 60 + 0.5) - 1,
			ss = Math.round(msecond - dd * 86400 - hh * 3600 - mm * 60),
			strtip = "";
		if (dd > 0)
			strtip = strtip + dd + "天";
		if (hh > 0)
			strtip = strtip + hh + "小时";
		if (mm > 0){
			strtip = strtip + mm + "分钟";
		if(dd > 0)
			return strtip;
		}
		if (ss > 0)
			strtip = strtip + ss + "秒";
		return strtip;
	}
	//把KM转化成需要是数据格式
	me.formatKm2M=function (v){
		if (v>1) return Math.round(v*1000)/1000+"公里";
		else if (v<=1) return Math.round(v*1000)+"米";
	} 
	me.formatDate=function(d){
		return (d.getYear()+1900)+"-"+(d.getMonth()+1)+"-"+(d.getDate())+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	}
	me.fnSetRotation=function (oObj,deg){
		var deg2radians = Math.PI * 2 / 360,
			rad = deg * deg2radians ,
			costheta = Math.cos(rad),
			sintheta = Math.sin(rad),
			a = parseFloat(costheta).toFixed(8),
			c = parseFloat(-sintheta).toFixed(8),
			b = parseFloat(sintheta).toFixed(8),
			d = parseFloat(costheta).toFixed(8);

		if (oObj.filters) {
			oObj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
			oObj.filters.item(0).M11 = costheta;
			oObj.filters.item(0).M12 = -sintheta;
			oObj.filters.item(0).M21 = sintheta;
			oObj.filters.item(0).M22 = costheta;
		} else {
			oObj.style["MozTransform"]="matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0)";
			oObj.style["WebkitTransform"]="matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0)";
			oObj.style["OTransform"]="matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0)";
			oObj.style["Transform"]="matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0)";
		}
	}
	me.setOpacity=function(obj,opacity){
		if(obj.filters){
			obj.style.filter="alpha(opacity="+opacity+")";
		}else{
			obj.style.opacity=parseFloat(opacity)/100;
		}
	}
	me.flip=function(obj,fliph){
		if(fliph){
			if(obj.filters){
				obj.style.filter="FlipH";
			}else{
				obj.style.MozTransform="scale(-1,1)";
				obj.style.WebkitTransform="scale(-1,1)";
				obj.style.OTransform="scale(-1,1)";
				obj.style.Transform="scale(-1,1)";
			}

		}else{
			if(obj.filters){
				obj.style.filter="";
			}else{
				obj.style.MozTransform="";
				obj.style.WebkitTransform="";
				obj.style.OTransform="";
				obj.style.Transform="";
			}
		}
	}

	//折现
	me.polys=[];
	me.arr=[];//数据
	//画标记
	//me.marker = new gm.Marker({map: me.map,position:latlng,icon:{url:"gray.gif"},title:"点击显示信息窗口",visible:false});

	//画信息窗口
	var myOptions = {disableAutoPan:true,content:"<div class='tipcontentbox'><p id='tipcontent'>正在加载数据。。。</p></div>",pixelOffset: new gm.Size(-18, 0),zIndex: 99,boxStyle: {background: "url(tipbox.gif) no-repeat scroll -122px 0 transparent",opacity: 0.8,width: "200px"},closeBoxMargin: "10px 3px 2px 2px",closeBoxURL: "close.gif",infoBoxClearance: new gm.Size(1, 1),isHidden: false,enableEventPropagation: false};
	me.ib = new InfoBox(myOptions);

	//car
	gm.event.addListener(me.ib,"position_changed",function(){
		var ib = me.ib,pos= ib.getPosition(),
			pixPosition = ib.getProjection().fromLatLngToDivPixel(pos),
			car = document.getElementById("car"),
			carimg = document.getElementById("carimg");
		if(!car){
			var car =document.createElement("span"),
					pane=ib.getPanes()[ib.pane_];
			car.innerHTML="<img src='"+(parseInt(Math.random()*5)+2)+".png' id='carimg' />";
			car.style.position="absolute";
			car.id=("car");
			car.className="car";
			car.style.left=((pixPosition.x-15)+"px");
			car.style.top=((pixPosition.y-20)+"px");	
			car.style.zIndex = ib.getZIndex();
			pane.appendChild(car);
		}else{
			car.style.left=((pixPosition.x-15)+"px");
			car.style.top=((pixPosition.y-20)+"px");	
		}
	});
	me.ib.open(me.map);
	gm.event.addListenerOnce(me.map,"idle",function(){
		me.ib.setPosition(latlng);
	});

	//复位
	me.reset= function(){
		//清除现有轨迹折现
		for (var i=0,l=me.polys.length; i<l; i++){
			var poly = me.polys[i],path = poly.getPath();
			path.clear();
		}
		while(me.polys.length) me.polys.pop();
		if(me._interval) window.clearInterval(me._interval);//清除现有动画
		me.distance=0;//总里程归零
		me.totaltime=0;//总时间
		me.firstTimestamp=0;//第一个回放的时间戳
		me.prevLatLng=null;//上一个坐标

		var car= document.getElementById("car");
		car && (car.style.display=="none");

		if(me.apResults && me.apResults.length){
			while(me.apResults.length) me.apResults.pop();
		}
		me.ib.hide();
		(document.getElementById("car")) && (document.getElementById("car").style.visibility="hidden");
	}
	//回放
	me.playBack= function(data){
		me.pause=false;
		me.arr = data.split(";");
		me.arr.pop();
		//找到最大/最小经(Longtitude)纬(Latitude)度，设置地图的边界
		var maxla=-180,maxlo=-90,minla=180,minlo=90;
		for (var i=0,l=me.arr.length; i<l; i++){
			var item = me.arr[i].split(",");
			maxla=Math.max(maxla,item[0]);
			maxlo=Math.max(maxlo,item[1]);
			minla=Math.min(minla,item[0]);
			minlo=Math.min(minlo,item[1]);
		}
		var maxLatLng=new  gm.LatLng(maxlo, maxla);
		var minLatLng=new  gm.LatLng(minlo, minla);
		var bounds=new gm.LatLngBounds(minLatLng,maxLatLng);

		me.reset();
		me.ib.show();
		
		
		me.currentIndex =0;//当前回放的下标
		me.apResults=[];
		var startPlayBack = function(){
			me._interval=window.setInterval(function(){
				if(me.pause===true)  return ;//暂停
				//回放完毕
				if(me.currentIndex==me.arr.length-1){
					if(me._interval) window.clearInterval(me._interval);
					//回放完毕后添加光标操作
					me.enableKey();
				}
				var item = me.arr[me.currentIndex],apResult=me.appendPosition(item,true);
				me.apResults.push(apResult);
				me.currentIndex++;
			},100);
		}
		gm.event.addListenerOnce(me.map,"idle",startPlayBack);
		me.map.fitBounds(bounds);
		//fitBounds:视口数据变化 tilesloaded
	}

	//回放完毕可以使用左右箭头 退回 
	me.enableKey=function(){
		me._kdhandler && google.maps.event.removeListener(me._kdhandler);
		me._kdhandler= gm.event.addDomListener(document.body,"keydown",function(e,data){
			var keyCode =e.keyCode, arr= me.arr;
			me.currentIndex = (keyCode==37?(Math.max(me.currentIndex-1,0)):me.currentIndex);//37 <-
			me.currentIndex = (keyCode==39?(Math.min(me.currentIndex+1,me.arr.length-1)):me.currentIndex); // 39 ->
			var item = arr[me.currentIndex].split(","),curLatLng=new gm.LatLng(item[1], item[0]),apResult=me.apResults[me.currentIndex],
				car = document.getElementById("car"),carimg= document.getElementById("carimg");
				//me.marker.setPosition(curLatLng);
				me.ib.setPosition(curLatLng);
				me.fnSetRotation(carimg,apResult.rotate);
				me.flip(car,apResult.flip);
				document.getElementById("tipcontent").innerHTML=apResult.msg;
				if(!me.map.getBounds().contains(curLatLng)){
					me.map.setCenter(curLatLng);
				}
		});	
	}
	//追加位置点
	//item:  经度,维度,时间戳,速度
	//panTo: 是否 将地图的中心位置设置到item坐标
	me.appendPosition = function (item,panTo){
		item = item.split(","),curLatLng=new gm.LatLng(item[1], item[0]);
		var result = {flip:false,rotate:0,result:""};
		//计算总里程
		//gm.geometry.spherical.computeDistanceBetween 计算两坐标的距离
		(null!=me.prevLatLng) && (me.distance+=gm.geometry.spherical.computeDistanceBetween(me.prevLatLng,curLatLng));
		//画轨迹
		var getSpeedColor=function(speed){
			return speed<=40?'green':'red';
		}
		if(me.polys.length==0){
			var polyOptions = {strokeColor: getSpeedColor(item[3]),strokeOpacity: 1.0,strokeWeight: 3,map:me.map},
				poly = new gm.Polyline(polyOptions),
				path=poly.getPath();
			path.push(curLatLng);
			me.polys.push(poly);
		}else{
			var lastColor=me.polys[me.polys.length-1].strokeColor,color=getSpeedColor(item[3]);
			if(lastColor==color){//与上一点颜色相同,同一条线
				me.polys[me.polys.length-1].getPath().push(curLatLng);
			}else{//与上一点颜色不同，新画一条线
				var polyOptions = {strokeColor: color,strokeOpacity: 1.0,strokeWeight:3,map:me.map},
					poly = new gm.Polyline(polyOptions),
				path=poly.getPath();
				path.push(me.prevLatLng);
				path.push(curLatLng);
				me.polys.push(poly);
			}
		}
		
		//计算总时间
		me.totaltime= ((me.firstTimestamp==0)?"0秒":me.formatSecond((parseInt(item[2],10)-me.firstTimestamp)/1000));

		me.ib.show();
		(document.getElementById("car")) && (document.getElementById("car").style.visibility="visible");
		me.ib.setPosition(curLatLng);
		result.msg="总时间："+me.totaltime+"<br/>速度："+item[3]+"公里/小时<br/>里程："+me.formatKm2M(me.distance/1000)+"<br/>信号："+me.formatDate(new Date(parseInt(item[2],10)));
		document.getElementById("tipcontent").innerHTML=result.msg;


		
		
		//计算车图标旋转角度 computeHeading(from:LatLng, to:LatLng)
		//这个角度 是12点方向为0，顺时针0度~180度,逆时针0度~-180度
		//这样，都顺时针旋转正数角度，如果是负的，将左右翻转
		if(me.prevLatLng){
			var heading=gm.geometry.spherical.computeHeading(me.prevLatLng,curLatLng),
				rotate=(90-Math.abs(heading)),//旋转度数(对于车头朝西)
				fliph=heading>0,//往右开 车需要水平翻转(对于车头朝西)
				car=document.getElementById("car"),
				carimg=document.getElementById("carimg"),
				tipc=document.getElementById("tipcontent");
				infoBox=tipc.parentNode.parentNode;
			result.flip = fliph;
			result.rotate=rotate;
			carimg && me.fnSetRotation(carimg,rotate);
			if(car){
				me.flip(car,fliph);
				car.style.left=( parseInt(infoBox.style.left,10)+"px");
				car.style.top= ((parseInt(infoBox.style.top,10)-17)+"px");
			}
		}

		if(panTo){
			if(!me.map.getBounds().contains(curLatLng)){
				me.map.setCenter(curLatLng);
			}
		}

		//记录为上一个坐标
		me.prevLatLng= curLatLng;

		//第一个时间戳
		if(me.firstTimestamp==0){
			me.firstTimestamp=parseInt(item[2],10);
		}
		return result;
	}

	me.realtime= function(arr){
		//reset
		if(!me._rtObjs) me._rtObjs=[];
		for (var i=0,l=me._rtObjs.length; i<l; i++){
			var o = me._rtObjs[i];
			//销毁infobox
			o.infobox.close();
			//销毁car
			o.car.parentNode.removeChild(o.car);
		}
		while(me._rtObjs.length) me._rtObjs.pop();
		me._rtArr=arr;
		me._zchandler && google.maps.event.removeListener(me._zchandler);//remove  zoom_changed listener
		me.reset();
		//找到最大/最小经(Longtitude)纬(Latitude)度，设置地图的边界
		var maxla=-180,maxlo=-90,minla=180,minlo=90;
		for (var i=0,l=arr.length; i<l; i++){
			var item = arr[i].split(",");
			maxla=Math.max(maxla,item[0]);
			maxlo=Math.max(maxlo,item[1]);
			minla=Math.min(minla,item[0]);
			minlo=Math.min(minlo,item[1]);
		}
		var maxLatLng=new  gm.LatLng(maxlo, maxla);
		var minLatLng=new  gm.LatLng(minlo, minla);
		var bounds=new gm.LatLngBounds(minLatLng,maxLatLng);
		me.map.fitBounds(bounds);
		
		for (var i=0,l=arr.length; i<l; i++){
			var item = arr[i].split(","),
				curLatLng=new gm.LatLng(item[1], item[0]),
				rotate=parseFloat(item[4]);

			
			//画信息窗口
			var myOptions = {disableAutoPan:true,content:"<div class='tipcontentbox'><p class='tipcontent' id='tipcontent"+i+"'>车辆"+i+"信息,方向："+rotate+"</p></div>",pixelOffset: new gm.Size(-18, 0),zIndex: 99+i,boxStyle: {background: "url(tipbox.gif) no-repeat scroll -122px 0 transparent",opacity: 0.8,width: "200px"},closeBoxMargin: "10px 3px 2px 2px",closeBoxURL: "close.gif",infoBoxClearance: new gm.Size(1, 1),isHidden: false,enableEventPropagation: false};
			var ib = new InfoBox(myOptions);
			ib.open(me.map);
			ib.setPosition(curLatLng);
			me._rtObjs.push({infobox:ib});
		}
		me.rePosCar=function (){
			google.maps.event.addListenerOnce(me.map,"idle",function(){
				for (var i=0,l=me._rtObjs.length; i<l; i++){
					var ib = me._rtObjs[i].infobox,pos=ib.getPosition(),
						pixPosition = ib.getProjection().fromLatLngToDivPixel(pos),
						car =document.getElementById("car"+i);
					if(!car){
						var car =document.createElement("span"),
							rotate= parseFloat(me._rtArr[i].split(",")[4]),
							pane=ib.getPanes()[ib.pane_];
						car.innerHTML="<img src='"+(parseInt(Math.random()*5)+2)+".png' id='carimg"+i+"' />";
						car.style.position="absolute";
						car.id=("car"+i);
						car.className="car";
						car.style.left=((pixPosition.x-15)+"px");
						car.style.top=((pixPosition.y-20)+"px");	
						car.style.zIndex = ib.getZIndex();
						pane.appendChild(car);

						me._rtObjs[i].car=car;//remember it

						var heading=rotate>180?rotate-360:rotate,
							rotate=(90-Math.abs(heading)),//旋转度数(对于车头朝西)
							fliph=heading>0,//往右开 车需要水平翻转(对于车头朝西)
							carimg=car.childNodes[0];

						me.fnSetRotation(carimg,rotate);
						me.flip(car,fliph);
						car.onclick = function(){
							var carIndex = parseInt(this.id.substr(3)),ib=me._rtObjs[carIndex].infobox;
							ib.isHidden_?ib.show():ib.hide();
						}

					}else{
						car.style.left=((pixPosition.x-15)+"px");
						car.style.top=((pixPosition.y-20)+"px");
					}
					var infoBox= document.getElementById("tipcontent"+i).parentNode.parentNode;
					if(infoBox.className.indexOf("infoBox-noclose")==-1){
						infoBox.className+=" infoBox-noclose";
					}
				}
			});
		}
		me._zchandler=gm.event.addListener(me.map,"zoom_changed",me.rePosCar);
		me.rePosCar();
	}

	me.highlightCar= function(index){
		if((!me._rtObjs) || (!me._rtObjs[index]) || (!me._rtObjs[index].infobox)) return ;
		var obj= me._rtObjs[index],tipc=document.getElementById("tipcontent"+index),oib=tipc.parentNode.parentNode,
			curHighLightib=document.getElementById("highlightInfobox"),
			car =document.getElementById("car"+index);
		me.map.setCenter(obj.infobox.getPosition());
		me.map.setZoom(18);
		obj.infobox.show();
		if(curHighLightib) {
			curHighLightib.className=curHighLightib.className.replace(/highlightInfoBox/i,"");
			curHighLightib.style.backgroundImage="url(tipbox.gif)";
			curHighLightib.id="";
			curHighLightib.style.zIndex  = curHighLightib.getAttribute("_zIndex") ;
			me.setOpacity(curHighLightib,80);
			var curHighLightCar=document.getElementById("car"+curHighLightib.getAttribute("carindex"));
			curHighLightCar.style.zIndex  = curHighLightib.getAttribute("_zIndex") ;
		}
		oib.className+=" highlightInfoBox";
		oib.id="highlightInfobox";
		oib.setAttribute("carindex",index);//remember in DOM Node
		oib.style.backgroundImage="url(tipbox-highlight.gif)";
		oib.setAttribute("_zIndex",oib.style.zIndex) ;
		oib.style.zIndex ="1000";
		car.style.zIndex  = "1000" ;
		me.setOpacity(oib,100);
	}

	me.socketRealtime=function(){
		
	}
}

function initialize_(){
	window.tracker = new Traker();
}

function getAdressByLatLng(){
	var gm=google.maps,latLng=new gm.LatLng(24.126635,115.76731),
		geoCoder=new gm.Geocoder() ;
	geoCoder.geocode({location:latLng},function(data,status){
		alert(data[0].formatted_address);
	});
}

function mockTrace(){
	tracker.reset();
	tracker.map.setZoom(10);
	var testdata ="115.76731,24.126635,1331718542000,49;115.7771,24.136635,1331718542000,49;115.77731,24.126635,1331718542000,49;115.76731,24.126635,1331718542000,49;"
	var arr = trackdata.split(";")
	arr.pop();

	//做一个测试
	var testarr=[]
	for (var i=0,l=10000; i<l; i++){
		var ll = 115.72689+(i*0.01);
		testarr.push(ll+",24.148394,1331722116000,30");
	}
	//arr=testarr;


	/*arr=[
			"115.76731,24.126635,1331718542000,49",
			"115.77731,24.136635,1331718542000,49",
			"115.78731,24.126635,1331718542000,49",
			"115.77731,24.116635,1331718542000,49",
			"115.76731,24.126635,1331718542000,49"
		];*/
	var index=0;
	for (var i=0,l=arr.length; i<l; i++){
		window.setTimeout(function(){
			var item = arr[index];
			tracker.appendPosition(item,true);
			index++;
		},i*100);
	}
	
}

function realtimeTrace(){
	var gm=google.maps;
	var rtArr=[],trackdataArr=trackdata.split(";");
	trackdataArr.pop();
	//模拟实时数据
	for (var i=0,l=100; i<l; i++){
		var item = trackdataArr[parseInt(Math.random()*trackdataArr.length)];
		//随机方向
		item+=(","+parseInt(Math.random()*360));
		rtArr.push(item);
	}
	tracker.realtime(rtArr);
	
}

function highlight(){
	tracker.highlightCar(parseInt(Math.random()*10)+1);
}

</script>
</head>
<body onload="initialize_()">
<div id="toolbar">
	<input type="button" value="回放" onclick="tracker.playBack(trackdata);" />
	<input type="button" value="暂停/继续" onclick="tracker.pause=!tracker.pause;" />
	<input type="button" value="根据经纬度获取地址" onclick="getAdressByLatLng()" />
	<input type="button" value="模拟单量车跟踪" onclick="mockTrace()" />
	<input type="button" value="模拟多辆车跟踪" onclick="realtimeTrace()" />
	<input type="button" value="高亮车" onclick="highlight()" />
	<input type="button" value="Socket" onclick="tracker.socketRealtime()" />
	</div>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
